<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :md="24" :sm="0" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="listname" :isShow="true"></headerPcTow>
							<div class="search_boxTow">
								<el-input :placeholder="$t('l_sousuo')" v-model="gameName" class="search_boxTowInputTT">
									<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
								</el-input>
								<div class="recycle_btnTow" @click="searchGramName">
									{{$t('l_sousuo')}}
								</div>
							</div>
							<div class="con">
								<div class="left" style="width: 90px;">
									<div class="litem" style="height: 80px;" v-for="(item,index) in navsTow"
										:key="index" @click="changefanshui(item.id,index)">
										<img v-if="platType == item.id" src="../../assets/images/yh/btn_zc2_2.png" alt="">
								<img v-else src="../../assets/images/yh/bg1.png" alt="">
										<!-- <img v-if="platType == item.platType" src="../../assets/images/yh/bg.png"
											alt="">
										<img v-else src="../../assets/images/yh/bg1.png" alt=""> -->
										<div class="litembox litemboxTow"
											:class="platType == item.id ? 'color':''">
											<div class="icon">
												<i class="" v-if="index==0"
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 37 30" width="28px" height="18px"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
													</svg>
												</i>
												<img :src="item.image" v-if="index!=0"
													style="width: 25px;height: 25px;margin-bottom: 5px;border-radius: 50%;" />
											</div>
											<div style="margin-top: 5px;">{{item.name}}</div>
										</div>
									</div>
								</div>
								<div class="rightTow" @scroll="listenScroll" id="d-scroll">
									<div class="navBoxBig">
										<div class="navBox" v-for="(item,index) in navBoxThree" :key="index"
											@click="selItem(index)">
											<div class="item" :class="{itemTow:isselNavItem==index}">
												{{item.name}}
											</div>
										</div>
									</div>
									<div class="lists">
										<div class="items" v-for="(vo,key) in gameList" :key="key" @click="goGame1(vo)">
											<div class="box">
												<img class="pic" :src="vo.imageUrl" />
												<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone two" v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone three" v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone four" v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone five" v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone five" v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
													<!-- <img class="cspic"
														:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: 12px;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<!-- <div class="tuijian" v-if="vo.is_suggest==1">
													推荐
												</div>
												<img class="lovebtn" src="/icons/index/no_love.png" /> -->
											</div>
										</div>

									</div>
									<!-- <div class="pageLists" v-if="gameList.length!=0">
										<el-pagination background layout="prev, pager, next" :total="totalPage"
											@current-change="changePage" :current-page="gamePage">
										</el-pagination>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="24" :xs="24" :md="0">

				<div>
					<navHeader :title="listname"></navHeader>
					<div class="h5Ipnut">
						<el-input :placeholder="$t('l_sousuo')" v-model="gameName" class="search_boxTowInputTTow"
							@blur="validateCounts">
							<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
						</el-input>
					</div>

					<div class="con" style="padding: 0 10px;">
						<div class="left">
							<div class="litem" v-for="(item,index) in navsTow" :key="index"
								@click="changefanshui(item.id,index)">
								<img v-if="platType == item.id" src="../../assets/images/yh/btn_zc2_2.png" alt="">
								<img v-else src="../../assets/images/yh/bg1.png" alt="">
								<div class="litembox" :class="platType == item.id ? 'color':''">
									<div class="icon">
										<i class="" v-if="index==0"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 37 30" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
											</svg>
										</i>
										<img v-if="index!=0" :src="item.image"
											style="width: 20px;height: 20px;border-radius: 50%;" />
									</div>
									<div>{{item.name}}</div>
								</div>
							</div>
						</div>

						<div class="right" ref="outerDom" @scroll="listenScroll">
							<div class="navBoxBigTow">
								<div class="navBox" v-for="(item,index) in navBoxThree" :key="index"
									@click="selItem(index)">
									<div class="item" :class="{itemTow:isselNavItem==index}">
										{{item.name}}
									</div>
								</div>
							</div>
							<div class="listsTow">
								<div class="items" v-for="(vo,key) in gameList" :key="key" @click="goGame(vo)">
									<div class="box">
										<img class="pic" :src="vo.imageUrl" />
										<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<div class="typeone two" v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<div class="typeone three" v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<div class="typeone four" v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<div class="typeone five" v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<div class="typeone five" v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
											<!-- <img class="cspic"
												:src="$F.getApiUrl()+'/gametype/'+vo.platType+'.png'" /> -->
											<span style="font-size: .16rem;">{{vo.platType}}</span>
											<span>{{vo.gameName}}</span>
										</div>
										<!-- 	<div class="tuijian" v-if="vo.is_suggest==1">
											推荐
										</div>
										<img class="lovebtn" src="/icons/index/no_love.png" /> -->
									</div>
								</div>
							</div>
							<!-- 	<div class="pageListsTow" v-if="gameList.length!=0">
								<el-pagination background layout="prev, pager, next" :total="totalPage"
									@current-change="changePage" :current-page="gamePage" :pager-count="3"
									class="h5page" style="width: 100%;	    padding: 0;">
								</el-pagination>
							</div> -->
						</div>
					</div>
				</div>
				<gameWebview ref="gameWebview"></gameWebview>
			</el-col>
			
			<Tabnav :activeInd="tabnavIndex"></Tabnav>

		</el-row>
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import taskBox from '../../components/taskBox.vue'
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import gameWebview from '../../components/gameWebview.vue'
	export default {
		components: {
			gameWebview,
			Tabnav,
			taskBox,
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				lists: [],
				cacheList: [],
				fs_status: 0,
				allMoney: 0,
				allfsMoney: 0,
				allfsVoidMoney: 0,
				tabnavIndex: 1,
				selecttype: 1,
				selecttab: 2,
				selecthuodong: 0,
				selectfanshui: '0',
				selecttabTow: 0,
				scrollTop: 0, //默认距离顶部的距离
				isShow: false, //控制返回顶部按钮的显隐
				scrollTrigger: false, //默认初始值

				navIndex: 0,
				navs: [{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_dtfl_dz_0',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_dtfl_qp_0',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_dtfl_by_0',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_dtfl_zr_0',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_dtfl_ty_0',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_dtfl_cp_0',
					},
				],

				navsTow: [{
					platType: '-1',
					name: this.$t('l_quanbu'),

					key: 'icon_dtfl_cp_0',
				}, ],
				navBoxThree: [{
						"name": this.$t('l_quanbu')
					}, {
						"name": this.$t('l_remen')
					},
					// {
					// 	"name": '最近'
					// }, 
					// {
					// 	"name": '收藏'
					// },
				],
				isselNavItem: 0,
				currentPage4: 4,

				// 获取游戏列表参数
				winHei: screen.availHeight, //屏幕高度
				obj: {
					height: 0
				},
				gamePage: 1,
				gameType: '-1',
				platType: "-1",
				listname: '',
				gameName: "",
				is_hot: '-1',
				totalPage: 100,
				gameList: [],
				gameindex: "",
				tabnavIndex:0
			}
		},
		created() {
			this.gameindex = this.$route.query.id; //例key_1
			this.gameType = this.$route.query.type; //例key:1
			this.listname = this.$route.query.name;
			this.platType = this.$route.query.platType ? this.$route.query.platType : '-1';
			console.log(this.gameType);
			this.getIndexGames();
			this.getGameList();
		},
		mounted() {
			this.obj.height = '500px'; //动态修改滚动区域高度
		},
		methods: {
			getIndexGames() {
				this.$api.getIndexGames({}, (res) => {
					if (res.code == 0) {
						for (var k in res.data) {
							if (k == this.gameindex) {
								this.navsTow = [...this.navsTow, ...res.data[k].list];
							}
						}
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			listenScroll(e) { //监听滚动
				let ele = e.srcElement ? e.srcElement : e.target;
				if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部
					this.addMoreData()
				}
			},
			addMoreData() { //加载更多
				this.gamePage++;
				this.getGameList();
			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			selItem(index) {
				this.isselNavItem = index;
				if (index == 1) {
					this.is_hot = '1'
				}
				if (index == 0) {
					this.is_hot = '-1'
				}
				if (index != 1 && index != 0) {
					this.is_hot = '0'
				}
				this.page = 1;
				this.gameList = [];
				this.getGameList()
			},
			changePage(val) {
				this.gamePage = val;
				this.getGameList()
			},
			getGameList() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameList({
					page: this.gamePage,
					gameType: this.gameType,
					platType: this.platType,
					gameName: this.gameName,
					is_hot: this.is_hot
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.gameList = [...this.gameList, ...res.data.data];
					} else {
						this.$message.error(res.msg);
					}
				})
			},

			changetab(e) {
				this.selecttab = e;
				if (this.selecttab != 1) {
					this.selecttabTow = e;
				}
			},
			changehuodong(e) {
				this.selecthuodong = e;
			},
			changefanshui(platType, index) {
				this.gameName = "";
				this.gamePage = 1;
				this.isselNavItem = 0;
				this.is_hot = '-1';
				this.platType = platType;
				this.selectfanshui = index;
				console.log(this.gamePage);
				this.gameList = [];
				this.getGameList()
				// this.lists = this.cacheList['key' + sum]
			},
			validateCounts() {
				this.gameList = [];
				this.gamePage = 1;
				this.isselNavItem = 0;
				this.getGameList()
			},
			searchGramName() {
				this.gameList = [];
				this.gamePage = 1;
				this.isselNavItem = 0;
				this.getGameList()
			},
			changeSelType(e) {
				this.selecttype = e;
			},
			seltabTo(e) {
				console.log(e);
				this.selecttab = e;
			},
			godetail() {
				this.$router.push('./detail')
			},
			goreceive() {
				this.$router.push('./receive')
			},
			goRatioList(item) {
				this.$router.push('./ratioList')
			},
			goGame(item) {
				let ingress = this.$F.isMobile() ? 'device2' : 'device1';
				if (item.ingress) {
					ingress = item.ingress
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameOpenGame({
					platType: item.platType,
					gameType: item.gameType,
					gameCode: item.api_id,
					ingress: ingress,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						// console.log(res.data.url)
						// return
						window.location.href=res.data.url
						// this.$refs.gameWebview.show(res.data)
						// this.full()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			full() {
				// if (document.body.requestFullscreen) {
				//     document.body.requestFullscreen();
				// } else if (document.body.mozRequestFullScreen) {
				//     document.body.mozRequestFullScreen();
				// } else if (document.body.webkitRequestFullscreen) {
				//     document.body.webkitRequestFullscreen();
				// } else if (document.body.msRequestFullscreen) {
				//     document.body.msRequestFullscreen();
				// }
			},
			goGame1(item) {
				let ingress = this.$F.isMobile() ? 'device2' : 'device1';
				if (item.ingress) {
					ingress = item.ingress
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameOpenGame({
					platType: item.platType,
					gameType: item.gameType,
					gameCode: item.api_id,
					ingress: ingress,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						// window.open(res.data)
						window.location.href=res.data.url
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style>
	.h5page .el-pagination.is-background .btn-next,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		margin: 0px 4px;
		background-color: #f4f4f5;
		color: #606266;
		min-width: 30px;
		border-radius: 2px;
	}

	.h5page .el-pagination {
		padding: 0;
	}

	.search_boxTowInputTT .el-input__inner {
		border-radius: 20px !important;
		height: 40px !important;
		padding: 0 15px !important;
		font-size: 15px !important;
	}

	.search_boxTowInputTT .el-input__icon {
		width: 30px !important;
		line-height: 35px !important;
		font-size: 16px !important;
	}

	.h5Ipnut {
		width: 96%;
		margin: 10px auto;
	}

	.search_boxTowInputTTow .el-input__inner {
		border-radius: 17.5px !important;
		height: 35px !important;
		padding: 0 15px !important;
		font-size: 14px !important;
	}

	.pageInpt {
		display: flex;
	}

	.block {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}

	.pageInpt .el-input__inner {
		background-color: var(--theme-main-bg-color) !important;
		border-color: var(--theme-color-line) !important;
		border-radius: 5px !important;
		color: var(--theme-text-color-darken) !important;
		font-size: 13px !important;
		height: 30px !important;
		line-height: 30px !important;
		padding: 0 !important;
		margin-left: 5px !important;
	}

	.pageInpt .el-pagination__jump {
		display: block !important;
		display: flex !important;
	}

	.pageInpt .el-pagination__editor.el-input {
		width: 45px !important;
		margin-right: 10px !important;
	}

	.is-reverse {
		right: 0;
		top: 21px !important;
		height: 25px !important;
		transform: scale(.8);
	}

	.el-icon-arrow-up {
		right: 0;
		top: -20px !important;
		height: 25px !important;
		transform: scale(.8);
	}

	.el-input__suffix {
		display: none !important;
	}

	.pageInpt .el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		background-color: var(--theme-main-bg-color) !important;
		border: 1px solid var(--theme-color-line) !important;
		color: var(--theme-text-color-darken) !important;
	}

	.pageInpt .el-pagination.is-background .btn-next,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		background-color: var(--theme-main-bg-color) !important;
		border: 1px solid var(--theme-color-line) !important;
	}

	.el-pagination.is-background .btn-next,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		background-color: var(--theme-main-bg-color) !important;
		border: 1px solid var(--theme-color-line) !important;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: var(--theme-primary-color) !important;
		color: #FFF !important;
	}

	.pageInpt .el-input__icon {
		width: 10px !important;
		/* line-height:10px !important; */
		font-size: 16px !important;
		margin-right: 5px !important;
	}
</style>
<style scoped>
	.recycle_btnTow {
		font-size: 15px;
		background-color: var(--theme-primary-color);
		width: 84px;
		height: 35px;
		cursor: pointer;
		color: var(--theme-primary-font-color);
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-weight: 300;
		margin-left: 10px;
	}

	.search_boxTow {
		margin: 20px 0;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
	}

	.right_icon {
		color: var(--theme-primary-color);
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	* {
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 46px;
		background: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 30px;
	}

	.hitem {
		height: 45px;
		border-bottom: 2px solid transparent;
		line-height: 45px;
		font-size: 12px;
		color: #fff;
		margin-left: 30px;
	}

	.hitem:first-child {
		margin-left: 0;
	}

	.hitem.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}

	.left {
		width: 75px;
		height: calc(100vh);
		padding-bottom: 180px;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	.left::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.litem {
		width: 100%;
		height: 52.5px;
		position: relative;
		margin-top: 10px;
		cursor: pointer;
	}

	.litem:first-child {
		margin-top: 0;
	}

	.litem>img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.litembox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding: 6px 5px 0 5px;
		color: rgb(173, 182, 196);
	}

	.litemboxTow {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0px 5px 0 5px;
		align-items: center;
	}

	.litembox.color {
		color: #fff;
	}

	.litembox>.icon {
		display: block;
		margin: 0 auto;
		width: 22px;
		height: 18px;
		font-size: .44rem;
	}

	.litemboxTow>.icon {
		display: block;
		margin: 5px 10px 0px 5px;
		width: 25px;
		height: 20px;
		font-size: 18px;
	}


	.litembox>div {
		text-align: center;
		font-size: 12px;
	}

	.litemboxTow>div {
		text-align: center;
		font-size: 14px;
	}

	.litem1 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(153, 153, 153);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		cursor: pointer;
	}

	.litem2 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(0, 93, 254);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.litem2THree {
		width: 70px;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		cursor: pointer;
	}

	.litem1Tow {
		width: 80px;
		height: 30px;
		padding: 0 2.5px;
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: #1c8ac1;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		box-shadow: var(--theme-aside-box-shadow);
		color: var(--theme-text-color-side-tabs);
	}

	.litem2Tow {
		background-color: rgb(0, 93, 254);
		color: var(--theme-primary-font-color);
	}

	.right {
		flex: 1;
		height: calc(100vh - 1.2rem);
		padding-left: 10px;
		padding-bottom: 180px;
		overflow-y: scroll;
	}

	.rightTow {
		flex: 1;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 10px;
		box-sizing: border-box;
		margin-left: 15px;
		border-radius: 5px;

		height: calc(100vh + 1.2rem);
		overflow-y: scroll;
	}

	.rightTow::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.ul {
		width: 102%;
		height: auto;
		overflow-y: auto;
	}

	.ritem {
		width: 100%;
		padding: 5px;
		height: 127.5px;
		margin-bottom: 10px;
		background-color: rgb(21, 29, 41);
		border-radius: 5px;
	}

	.ritem img {
		width: 100%;
		height: 100%;
	}

	/* 返回顶部样式 */
	.scrollBox {
		position: fixed;
		bottom: 1.44rem;
		right: 0.1rem;
		width: 1.1rem;
		height: 50px;
		border-radius: 0.14rem;
		padding: 0.14rem 0.05rem 0.04rem;
		z-index: 99;
		text-align: center;
		box-shadow: 0.02rem 0 0.06rem 0 rgb(0 0 0 / 10%);
		cursor: pointer;
		background-color: var(--theme-top-nav-bg);;
		border: .01rem solid var(--theme-color-line);
	}

	.scrollBox .icon {
		font-size: .3rem;
		height: 0.38rem;
		margin: 0 auto;
		margin-bottom: 0.04rem;
		width: 0.38rem;
		background-color: var(--theme-primary-color);
		border-radius: 50%;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scrollBox div {
		font-size: 12px;
		color: rgb(85, 101, 126);
	}

	.con1header {
		width: 100%;
		height: 0.7rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.2rem;
	}

	.con1header .text {
		font-size: .22rem;
		color: var(--theme-alt-neutral-2);
	}

	.con1headerTow {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
	}

	.con1headerTow .text {
		font-size: 15px;
		color: var(--theme-alt-neutral-2);
		margin-right: 30px;
	}

	.fanshuiritem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.12rem;
		font-size: .2rem;
		margin-bottom: 0.2rem;
		min-height: 1.1rem;
		padding: 0.2rem 0 0.2rem 0.1rem;
	}

	.fanshuiritem .left {
		width: 0.7rem;
		margin-top: -0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: rgb(173, 182, 196);
	}

	.fanshuiritem .left img {
		width: 0.5rem;
		height: 0.5rem;
	}

	.fanshuiritem .center {
		flex: 1;
		padding-left: 0.1rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem .center .up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.14rem;
	}

	.pageLists {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.pageListsTow {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.fanshuiritem .center .up .righttext {
		flex-shrink: 0;
		padding-left: 0rem;
		padding-right: 0.06rem;
		/* width: 1.76rem; */
		text-align: left;
	}

	.fanshuiritem .icon {
		color: var(--theme-color-line);
		padding: 0 0.18rem 0 0;
	}

	.fanshuiritem .icon svg {
		display: block;
		height: 0.26rem;
		transform: rotate(180deg);
		width: 0.26rem;
	}

	/* 2 */
	dl,
	ol,
	ul {
		margin-bottom: 0.2em;
		margin-top: 0;
	}

	ul {
		list-style: none;
	}

	.nqZoMAOa9VoBq0DesDWl li {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		display: -ms-flexbox;
		margin-top: 0.2rem;
		padding: 0.15rem 0.2rem;
		position: relative;
	}

	.nqZoMAOa9VoBq0DesDWl li:first-child {
		margin-top: 0;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0.05rem 0.2rem 0.15rem 0.05rem;
	}

	._Xh4S8uJ8rtshK0NDPr8 .hg3pWm3VA8nZxTi_potS {
		color: var(--theme-text-color-process-text);
		font-size: .16rem;
		line-height: .22rem;
		width: 84px;
		height: 10px;
		background-color: #53677d;
		border-radius: 5px;
		text-align: center;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		color: var(--theme-text-color-darken);
		font-size: .2rem;
		line-height: 1.2;
	}

	.a7kKVFMt7IcMdx7bFSPA {
		color: var(--theme-primary-color);
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		min-height: 0.4rem;
	}

	._Xh4S8uJ8rtshK0NDPr8,
	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		height: 0.2rem;
	}

	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		background-color: var(--theme-secondary-color-success);
		border-radius: 0.2rem;
		height: 0.2rem;
		text-indent: -99.99rem;
	}


	.nqZoMAOa9VoBq0DesDWl .WzttGCRh1zz4Ew8j8EDv {
		bottom: 0.18rem;
		right: 0.12rem;
		display: flex;
		align-items: center;
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g,
	.nqZoMAOa9VoBq0DesDWl .HfvXXf9iXxGtgzlM8whR {
		-ms-flex-align: center;
		align-items: center;
		display: -ms-flexbox;
		display: flex;
		font-size: .16rem;
	}

	.XGEOwGXgDL9a2SebPqvj {
		color: var(--theme-secondary-color-finance);
	}

	.HI77FtRdvO4aiGOC1sgp {
		color: var(--theme-secondary-color-success);
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g {
		margin-left: 0.3rem;
	}

	.lNN1n3xmTNF7b6i1nG80.tbneT0bs0pWuU_T1Byqz {
		background-color: var(--theme-primary-color) !important;
		color: var(--theme-primary-font-color) !important;
	}

	.lNN1n3xmTNF7b6i1nG80 {
		font-size: .2rem;
		height: 0.5rem;
		width: 1.2rem;
	}

	.ant-btn,
	.ant-select-dropdown {
		border-radius: 0.14rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		color: var(--theme-text-color);
		font-size: .18rem;
		line-height: 1.56;
		padding: 0.25rem 0.2rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		font-size: .22rem;
		line-height: 1.45;
	}

	.eHg0yRf1S2LNSSMGVlpa p {
		/* margin-top: 0.05rem; */
	}

	.UwyNP8CcObxeFMJmAhCj {
		color: var(--theme-text-color-darken);
	}

	.rightThree {
		width: 100%;
	}

	.nodataTow {
		margin: 0 auto;
		text-align: center;
		margin-top: 30px;
	}

	.nodataTow img {
		height: 150px;
		margin-bottom: 10px;
		margin: 0 auto;
		width: 170px;
	}

	.nodataTow div {
		color: var(--theme-alt-neutral-2);
		font-size: 16px;
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.fanshuiBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-between;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}

	.fanshuiBox>ul li {
		width: 16%;
		text-align: center;
	}

	.fanshuiBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanshuiBox>ul li:nth-child(6) {
		width: 10%;
	}

	.fanlistBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-between;
		border-radius: 5px;
	}

	.fanlistBox>ul li {
		width: 16%;
		text-align: center;
		color: var(--theme-text-color);
	}

	.fanlistBox>ul li:nth-child(1) {
		width: 20%;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}

	.fanlistBox>ul li:nth-child(6) {
		width: 10%;
		font-size: 14px;
		cursor: pointer;
		color: var(--theme-primary-color);
	}

	.fanlistBox>ul li:nth-child(5) {
		color: var(--theme-secondary-color-finance);
	}

	.liOne {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.liOne img {
		width: 30px;
		height: 30px;
		margin-right: 5px;
	}

	/* 底部 */
	.bottomBox {
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 80px;
	}

	.bottomBoxOne {
		width: 62%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}

	.boxTop {
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}

	.boxTopL {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}

	.boxTopL li {
		width: 176px;
		color: var(--theme-text-color-lighten);
	}

	.boxTopL h3 {
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}

	.boxTopL a {
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}

	.boxTopL a:hover {
		color: var(--theme-primary-color);
	}

	.boxTopR {
		width: 420px;
	}

	.boxTopRImg {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.boxTopRImg img {
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}

	.boxTopRText {
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}

	.boxCon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxCon img {
		width: 85px;
		height: 30px;
		margin: 10px 8px;
	}

	.boxCon img:nth-child(1),
	.boxCon img:nth-child(2),
	.boxCon img:nth-child(3) {
		width: 95px;
		height: 30px;
		margin: 10px 6px;
	}

	.boxBot {
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}
</style>
<style lang="less" scoped>
	.navBoxBig {
		display: flex;
		align-items: center;
		margin: 10px 0px;

		.navBox {
			.item {
				cursor: pointer;
				margin-right: 10px;
				height: 35px;
				line-height: 35px;
				width: 80px;
				text-align: center;
				font-size: 14px;
				background-color: var(--theme-main-bg-color);
				border: 1px solid var(--theme-color-line);
				border-radius: 5px;
				color: var(--theme-text-color);
			}

			.itemTow {
				background-color: var(--theme-primary-color);
				border: initial;
				color: var(--theme-primary-font-color);
			}
		}
	}

	.navBoxBigTow {
		display: flex;
		align-items: center;
		margin: 10px 0px;

		.navBox {
			.item {
				cursor: pointer;
				margin-right: 8px;
				height: 27px;
				line-height: 27px;
				width: 60px;
				text-align: center;
				font-size: 13px;
				background-color: var(--theme-main-bg-color);
				border: 1px solid var(--theme-color-line);
				border-radius: 5px;
				color: var(--theme-text-color);
			}

			.itemTow {
				background-color: var(--theme-primary-color);
				border: initial;
				color: var(--theme-primary-font-color);
			}
		}
	}

	.lists {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 7px;

		.items {
			margin: 15px 10px 5px;
			width: 17.5%;

			.box {
				height: 178px;
				width: 133px;
				border-radius: 10px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;

				.pic {
					width: 100%;
					height: 100%;
				}

				.lovebtn {
					align-items: center;
					cursor: pointer;
					display: -ms-flexbox;
					display: flex;
					font-size: 26px;
					height: 26px;
					justify-content: center;
					line-height: 0;
					position: absolute;
					right: 4px;
					top: 4px;
					width: 26px;
					z-index: 9;
				}

				.typeone {
					position: absolute;
					z-index: 1;
					bottom: 0;
					width: 100%;
					display: flex;
					align-items: center;
					text-align: center;
					flex-direction: column-reverse;
					pointer-events: none;
					padding-bottom: 5px;

					span {
						font-family: MicrosoftYaHei;
						font-size: 20px;
						line-height: 1.1;
						line-height: 1.3;
						padding: 0 5px;
						max-height: 110px;
						max-width: 100%;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
						text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
						color: var(--theme-text-color-task-btn);
						/*超出部分隐藏*/
						overflow: hidden;
						/*强制在一行*/
						white-space: nowrap;
						/*文本超出部分省略*/
						text-overflow: ellipsis;
					}

					.cspic {
						display: inline-block;
						height: 55px;
						width: 65px;
					}
				}

				.tuijian {
					font-size: 12px;
					font-weight: 700;
					line-height: 1;
					background-color: var(--theme-secondary-color-error);
					align-items: center;
					color: var(--theme-text-color-activities-text);
					display: flex;
					padding: 1.5px 4px;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
				}
			}
		}
	}

	.listsTow {
		display: flex;
		flex-wrap: wrap;

		.items:nth-child(3n-1) {
			margin: 0px 12px;
		}

		.items {
			margin: var(--cardRowSpacing) var(--cardColSpacing);
			width: 30%;
			margin-bottom: 15px;

			.box {
				height: 2rem;
				width: 100%;
				border-radius: 0.2rem;
				margin: 0 auto;
				overflow: hidden;
				position: relative;

				.pic {
					width: 100%;
					height: 100%;
				}

				.lovebtn {
					align-items: center;
					cursor: pointer;
					display: -ms-flexbox;
					display: flex;
					font-size: .4rem;
					height: 0.4rem;
					justify-content: center;
					line-height: 0;
					position: absolute;
					right: 0.06rem;
					top: 0.06rem;
					width: 0.4rem;
					z-index: 9;
				}

				.typeone {
					position: absolute;
					z-index: 1;
					bottom: 0;
					width: 100%;
					display: flex;
					align-items: center;
					text-align: center;
					flex-direction: column-reverse;
					pointer-events: none;
					padding-bottom: 5px;

					span {
						font-family: MicrosoftYaHei;
						font-size: .28rem;
						line-height: 1.1;
						line-height: 1.3;
						padding: 0 5px;
						max-height: 2.2rem;
						max-width: 100%;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
						text-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, .3);
						color: var(--theme-text-color-task-btn);
						/*超出部分隐藏*/
						overflow: hidden;
						/*强制在一行*/
						white-space: nowrap;
						/*文本超出部分省略*/
						text-overflow: ellipsis;
					}

					.cspic {
						display: inline-block;
						height: 0.46rem;
						width: 0.46rem;
					}
				}

				.tuijian {
					font-size: .2rem;
					font-weight: 700;
					line-height: 1;
					background-color: var(--theme-secondary-color-error);
					align-items: center;
					color: var(--theme-text-color-activities-text);
					display: flex;
					padding: .03rem .16rem;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					border-top-right-radius: .1rem;
					border-bottom-right-radius: .1rem;
				}
			}
		}
	}

	@media only screen and (min-width: 992px) {
		.el-col-md-24 {
			display: block;
		}
	}

	.typeone.one {
		background: linear-gradient(rgb(199, 91, 247), rgb(172, 26, 239));
	}

	.typeone.two {
		background: linear-gradient(rgb(250, 146, 61), rgb(246, 105, 0));
	}

	.typeone.three {
		background: linear-gradient(rgb(156, 85, 49), rgb(156, 93, 67));
	}

	.typeone.four {
		background: linear-gradient(rgb(192, 20, 59), rgb(239, 8, 77));
	}

	.typeone.five {
		background: linear-gradient(rgb(120, 93, 86), rgb(171, 140, 121));
	}

	.typeone.six {
		background: linear-gradient(rgb(21, 137, 116), rgb(22, 213, 164));
	}
</style>